<template>
	<view class="health">
		<view class="t_container">
			<view class="l_content">
				欢迎回来!
			</view>
		</view>
		<view class="m_container">
			<view class="plate_t">
				<text class="t-l">测量记录</text>
				<view class="t-r" @click="goAnalyse"><text class="more">查看更多</text> <text
						class="iconfont icon-arrow_rigth"></text></view>
			</view>
			<view class="record-card">
				<view class="c_tips">
					<text class="txt">代谢等级</text>
					<!-- <text class="iconfont icon-question-circle-fill"></text> -->
				</view>
				<view class="total">
					{{ chartsRecordList.length ? `${chartsRecordList.length}次` : '今日未测量' }}
				</view>
				<view class="r_charts">
					<uni-ec-canvas class="uni-ec-canvas" canvas-id="record" ref="record-charts"></uni-ec-canvas>
				</view>
				<view class="card_btn" v-if="!chartsRecordList.length"
					@click="navigate('/pagesA/health/device/info/index')">
					去测量
				</view>
				<view class="details" v-if="showClickDetails">
					<view class="d_l">
						<view class="l_l" :style="{backgroundColor:  getBgColor(recordInfo.level)}">
							{{ recordInfo.level }}
						</view>
						<view class="type">
							{{ recordInfo.type }}
						</view>
					</view>
					<view class="d_r">
						{{ recordInfo.measureTime }}
					</view>
				</view>
			</view>

			<view style="margin: 0 48rpx;">
				<u-image width="100%" height="190rpx" :showMenuByLongpress="false"
					@click="navigateTo('/pagesB/knowledge/standard')"
					src="http://oss.antaimedical.com/images/static/2024/08/66bf010be4b000d2c606b52cdcZTLCGtB4gR2a705e2ad0473dfebf89e6b9b1326441.png"
					:lazy-load="true"></u-image>
			</view>
			<view class="plate_t" style="margin-top: 32rpx;">
				<text class="t-l">日常观察</text>
			</view>
			<view class="my-swiper">
				<swiper previous-margin="24rpx" next-margin="24rpx" class="swiper-container" :duration="800"
					@change="bindContrastChange" :current="currentContrastIndex">
					<swiper-item class="swiper-item" v-for="(item,index) in contrastList" :key="item.id">
						<view class="o_f_card"
							:style="{margin: currentContrastIndex == index ? '0 24rpx 4rpx' : '0 0 4rpx',padding: '0'}">
							<view class="c_tips" @click="navigate('/pagesA/health/diet/index')">
								<text class="c-l">饮食</text>
								<text class="iconfont icon-arrow_rigth"></text>
							</view>
							<view class="info">
								<view class="public i_l">
									<view class="main">
										<view class="tag">
											{{ item.type | typeFilte }}
										</view>
										<view class="time">
											{{ item.id ? item.dietaryTime : '今日未记录' }}
										</view>
									</view>
									<view class="border"></view>
								</view>
								<view class="public i_m">
									<view class="meal_b">
										<view class="bar" v-if="item.rerLevelFront"
											:style="{height: getHeight(item.rerLevelFront),backgroundColor: getBgColor(item.rerLevelFront)}">
											<text>{{ item.rerLevelFront }}</text>
										</view>
										<text class="iconfont icon-a-ziyuan2" v-else
											@click="shortcutDiet(4,item.type)"></text>
										<view class="text">
											餐前
										</view>
									</view>
									<view class="meal_a">
										<view class="bar" v-if="item.rerLevelAfter"
											:style="{height: getHeight(item.rerLevelAfter),backgroundColor: getBgColor(item.rerLevelAfter)}">
											<text>{{ item.rerLevelAfter }}</text>
										</view>
										<text class="iconfont icon-a-ziyuan2" v-else
											@click="shortcutDiet(5,item.type)"></text>
										<view class="text">
											餐后
										</view>
									</view>
								</view>
								<view class="public i_r">
									<view class="border"></view>
									<view class="main">
										<u-image width="48rpx" v-if="item.rerLevelFront && item.rerLevelAfter"
											:showMenuByLongpress="false" shape="circle" height="48rpx"
											:src="getStatusSrc(item)" :lazy-load="true"></u-image>
										<text v-else style="padding-right: 48rpx;color: #666;">--</text>
									</view>
								</view>
							</view>
							<view class="gap" style="height: 32rpx;"></view>
							<view class="f_options">
								<view class="option" v-for="(item_,index_) in foodOptions" :key="index_"
									@click="goAddRecord(item_)">
									<u-image width="48rpx" height="48rpx" :showMenuByLongpress="false"
										:src="item_.isNull ? item_.n_url : item_.url" :lazy-load="true"></u-image>
									<text class="text">{{ item_.text }}</text>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>

			<view class="indicator" style="margin: 32rpx 0 48rpx;">
				<!-- 	<u-image width="48rpx" height="48rpx" :showMenuByLongpress="false"
					@click="$u.throttle(reduce_c,1000)"
					src="http://oss.antaimedical.com/images/static/2024/07/6690f721eb14d0f049f44d4fjy4xzrYAJBuG7f1f413ee9db0c4a498e3ad8017621b0.png"
					:lazy-load="true"></u-image> -->
				<view class="page">
					<view class="dots" :style="{backgroundColor: currentContrastIndex == index ? '#545DDE' : '#CCCCCC'}"
						v-for="(item,index) in contrastList.length" :key="index"></view>
				</view>
				<!-- <u-image width="48rpx" height="48rpx" :showMenuByLongpress="false" @click="$u.throttle(next_c,1000)"
					src="http://oss.antaimedical.com/images/static/2024/07/6690f735eb14d0f049f44d50JLzReaiikJTQc2681661f1bb789352b3fc054979635a.png"
					:lazy-load="true"></u-image> -->
			</view>


			<view class="my-swiper">
				<swiper previous-margin="24rpx" next-margin="24rpx" class="swiper-container" :duration="800"
					@change="bindCampaignChange" v-if="campaignList.length" :current="currentCampaignIndex">
					<swiper-item class="swiper-item" v-for="(item,index) in campaignList" :key="item.id">
						<view class="o_e_card"
							:style="{margin: currentCampaignIndex == index ? '0 24rpx 4rpx' : '0 0 4rpx',padding: '0'}">
							<view class="c_tips" @click="navigate('/pagesA/health/campaign/index')">
								<text class="c-l">运动</text>
								<text class="iconfont icon-arrow_rigth"></text>
							</view>
							<view class="info">
								<view class="public i_l">
									<view class="main">
										<view class="tag">
											{{ item.name }}
										</view>
										<view class="time">
											{{ item.sportStartTime }}
										</view>
									</view>
									<view class="border"></view>
								</view>
								<view class="public i_m">
									<view class="meal_b">
										<view class="bar" v-if="item.rerLevelFront"
											:style="{height: getHeight(item.rerLevelFront),backgroundColor: getBgColor(item.rerLevelFront)}">
											<text>{{ item.rerLevelFront }}</text>
										</view>
										<text class="iconfont icon-a-ziyuan2" v-else
											@click="shortcutCampaign(2)"></text>
										<view class="text">
											运动前
										</view>
									</view>
									<view class="meal_a">
										<view class="bar" v-if="item.rerLevelAfter"
											:style="{height: getHeight(item.rerLevelAfter),backgroundColor: getBgColor(item.rerLevelAfter)}">
											<text>{{ item.rerLevelAfter }}</text>
										</view>
										<text class="iconfont icon-a-ziyuan2" v-else
											@click="shortcutCampaign(3)"></text>
										<view class="text">
											运动后
										</view>
									</view>
								</view>
								<view class="public i_r">
									<view class="border"></view>
									<view class="main">
										<u-image width="48rpx" :showMenuByLongpress="false"
											v-if="item.rerLevelFront && item.rerLevelAfter" shape="circle"
											height="48rpx" :src="getStatusSrc(item)" :lazy-load="true"></u-image>
										<text v-else style="padding-right: 48rpx;color: #666;">--</text>
									</view>
								</view>
							</view>
							<view class="footer">
								<view class="card_btn" @click="navigate('/pagesA/health/device/info/campaign/add')">
									添加运动记录
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<view class="o_e_card" v-else style="margin: 0 48rpx 32rpx; padding: 0;">
					<view class="c_tips" @click="navigate('/pagesA/health/campaign/index')">
						<text class="c-l">运动</text>
						<text class="iconfont icon-arrow_rigth"></text>
					</view>
					<view class="info">
						<view class="public i_l">
							<view class="main">
								<view class="time">
									今日未记录
								</view>
							</view>
							<view class="border"></view>
						</view>
						<view class="public i_m">
						</view>
						<view class="public i_r">
							<view class="border"></view>
							<view class="main"></view>
						</view>
					</view>
					<view class="footer">
						<view class="card_btn" @click="navigate('/pagesA/health/device/info/campaign/add')">
							添加运动记录
						</view>
					</view>
				</view>
			</view>
			<view class="indicator" v-if="campaignList.length" style="margin: 52rpx 0 48rpx;">
				<view class="page" v-if="campaignList.length > 4">
					<view class="dots" v-for="(item,index) in 5" :key="index"
						:style="{backgroundColor: getCurrentBol(index) ? '#545DDE' : '#CCCCCC'}">
					</view>
				</view>
				<view class="page" v-else>
					<view class="dots" v-for="(item,index) in campaignList" :key="index"
						:style="{backgroundColor: currentCampaignIndex == index ? '#545DDE' : '#CCCCCC'}">
					</view>
				</view>
			</view>
			<view class="o_s_card" style="margin: 0 48rpx 32rpx; padding: 0;">
				<view class="c_tips" @click="navigate('/pagesA/health/sleep/index')">
					<text class="c-l">睡眠</text>
					<text class="iconfont icon-arrow_rigth"></text>
				</view>
				<view class="info">
					<view class="public i_l">
						<view class="main">
							<view class="tag"
								v-if="sleepInfo.duration || sleepInfo.rerLevelFront || sleepInfo.rerLevelAfter">
								睡眠时长
							</view>
							<view class="time">
								{{ sleepInfo.duration ? sleepInfo.duration : '今日未记录' }}
							</view>
						</view>
						<view class="border"></view>
					</view>
					<view class="public i_m" v-if="sleepInfo.rerLevelFront || sleepInfo.rerLevelAfter">
						<view class="meal_b">
							<view class="bar" v-if="sleepInfo.rerLevelFront"
								:style="{height: getHeight(sleepInfo.rerLevelFront),backgroundColor: getBgColor(sleepInfo.rerLevelFront)}">
								<text>{{ sleepInfo.rerLevelFront }}</text>
							</view>
							<view class="text">
								睡前
							</view>
						</view>
						<view class="meal_a">
							<view class="bar" v-if="sleepInfo.rerLevelAfter"
								:style="{height: getHeight(sleepInfo.rerLevelAfter),backgroundColor: getBgColor(sleepInfo.rerLevelAfter)}">
								<text>{{ sleepInfo.rerLevelAfter }}</text>
							</view>
							<view class="text">
								起床
							</view>
						</view>
					</view>
					<view class="public i_r">
						<view class="border"></view>
						<view class="main">
							<u-image width="48rpx" :showMenuByLongpress="false"
								v-if="sleepInfo.rerLevelFront && sleepInfo.rerLevelAfter" shape="circle" height="48rpx"
								:src="getStatusSrc(sleepInfo)" :lazy-load="true"></u-image>
						</view>
					</view>

				</view>
				<view class="footer">
					<view class="card_btn" @click="navigate('/pagesA/health/device/info/index')">
						去测量
					</view>
				</view>
			</view>
			<view style="margin: 0 48rpx;">
				<u-image width="100%" height="190rpx" :showMenuByLongpress="false"
					@click="navigateTo('/pagesB/knowledge/elasticity')"
					src="http://oss.antaimedical.com/images/static/2024/08/66bef07ee4b09217821c0fafR9kTm4beH1By7a37dd5bbafc6a5712d91b4e1fcc623d.png"
					:lazy-load="true"></u-image>
			</view>
			<view class="plate_t" style="margin-top: 32rpx;">
				<text class="t-l">弹性代谢指数</text>
			</view>
			<view class="m-card">
				<view class="none" v-if="scoreInfo.pageType == 0">
					<u-image width="112rpx" height="112rpx" :showMenuByLongpress="false"
						src="http://oss.antaimedical.com/images/static/2024/08/66beeff3e4b000d2c606b52aHRDiUidwN5rRf6963e30f39f14b28168528132e8d84c.png"
						:lazy-load="true"></u-image>
					<view class="status">
						未开启
					</view>
					<view class="m_t">
						解锁您的弹性分数
					</view>
					<view class="intro">
						在本周内完成3天日目标即可生成第一个代谢分数，加油！
					</view>
				</view>
				<view class="unlock" v-else-if="scoreInfo.pageType == 1">
					<u-image width="112rpx" height="112rpx" :showMenuByLongpress="false"
						src="http://oss.antaimedical.com/images/static/2024/08/66beeff3e4b000d2c606b52aHRDiUidwN5rRf6963e30f39f14b28168528132e8d84c.png"
						:lazy-load="true"></u-image>
					<view class="m_t">
						在本周内再完成{{ scoreInfo.day }}天日目标即可生成第一个代谢弹性分数，加油！
					</view>
					<view class="day">
						<view class="d_t">
							日目标
						</view>
						<view class="tips">
							根据个人生活习惯完成清晨、早餐后、午餐后、晚餐后的测量。
						</view>
						<view class="options">
							<view class="option" v-for="(item,index) in goalStatus" :key="index">
								<view class="o_status" :class="{checked: item.status}">
									<u-icon v-if="item.status" name="checkmark" color="#fff" size="28"></u-icon>
									<text v-else>-</text>
								</view>
								<view class="type">
									{{ item.name }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="task" v-else-if="scoreInfo.pageType == 2" @click="navigate('/pagesA/health/grade/details')">
					<view class="u_time">
						更新日期：{{ scoreInfo.createTime }}
					</view>
					<view class="garage">
						<uni-ec-canvas class="uni-ec-canvas" ref="mychart-home-progress" :ec="ecGrade"
							canvas-id="mychart-home-progress">
						</uni-ec-canvas>
						<view class="details">
							{{ scoreInfo.mbScore.toFixed(2) }}
						</view>
					</view>
					<view class="m_t">
						持续跟踪弹性分数，有助于了解您的健康弹性，加油！
					</view>
					<view class="weeks">
						<view class="d_t">
							本周概况
						</view>
						<view class="status">
							<view class="s_i" v-for="(item,index) in taskStatus" :key="item.type">
								<view class="s_dot" :style="{backgroundColor: item.color}"></view>
								<view class="s_text">{{ item.text }}</view>
							</view>
						</view>
						<view class="w_box">
							<view class="week" v-for="(item,index) in weeks" :key="item.type">
								<view class="w_dot"
									:style="{backgroundColor:item.color ? item.color: '#fafafa',border: item.color ? '0': '2rpx solid #666666' }">
								</view>
								<view class="w_text">
									{{ item.text }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="more_button" v-if="scoreInfo.pageType == 1"
					@click="navigate('/pagesA/health/grade/details')">
					了解更多
				</view> -->
			</view>
			<view class="w-card">
				<view class="title">
					<text class="t-l">您的体重</text>
					<image :src="imgUrl + 'img/ico/at/20230906/1693968678488.png'" class="handle"
						@click="showModal = true"></image>
				</view>
				<view class="tabs">
					<view @click="changeWeightTab(index,item.type)" class="tab"
						:class="{current: currentWIndex == index}" v-for="(item,index) in tabs" :key="index">
						{{ item.text }}
					</view>
				</view>
				<view class="charts_w">
					<uni-ec-canvas class="uni-ec-canvas" ref="mychart-w-line" canvas-id="mychart-w-line">
					</uni-ec-canvas>
					<view class="maxSingle">
						公斤
					</view>
					<view class="minSingle">
						公斤
					</view>
				</view>
				<view v-if="showInfo" style="margin-top: 48rpx;">
					<view class="showModal-page">
						<view class="s_l">
							<view class="time">
								{{ detailTime }}
							</view>
							<view class="showModal-line"></view>
							<view class="info_data">
								<text style="color: #545DDE;">{{ detailData }}</text>
								<text>公斤</text>
							</view>
						</view>
						<view class="h_b" @click="showDelete = true">
							编辑
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-modal :show="showDelete" @close="showDelete = false" @cancel="showDelete = false"
			@confirm="$u.throttle(deleteRecord, 2500)" title="删除记录" confirmText="确认" cancelText="取消" showCancelButton
			cancelColor="#000000" confirmColor="#545DDE">
			<view class="del_tips">
				确认删除该记录?
			</view>
		</u-modal>
		<custom-modal :showModal="showModal" @close="showModal = false" type="weight" @sendWeight="setWeight"
			:weight="userInfo.weight"></custom-modal>
		<tab-bar :current="0"></tab-bar>
	</view>
</template>

<script>
	import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue';
	import * as echarts from '@/components/uni-ec-canvas/echarts.min.js';
	import customModal from '@/components/custom-modal/index.vue'
	import {
		findMeasureRecordByPage,
		findMealDietaryContrast,
		findMealDietaryTime,
		findSportComparison,
		findSleepCompare,
		getDetailsByUser,
		getWeightRecord,
		delWeightLog,
		addWeightLog,
		findMetabolicFlexScore
	} from '@/api/index.js'
	import {
		getItemColor
	} from '@/utils/utils.js'
	import {
		mapState,mapGetters
	} from 'vuex'
	import colorGradient from '../../uni_modules/uview-ui/libs/function/colorGradient';
	const dayjs = require('@/utils/dayjs.min.js');
	export default {
		components: {
			uniEcCanvas,
			customModal
		},
		data() {
			return {
				imgUrl: this.$imgUrl,
				userId: uni.getStorageSync("userId"),
				foodOptions: [{
						type: 1,
						text: '早餐',
						url: 'http://oss.antaimedical.com/images/static/2024/06/666d2d82eb14d0f049f44d10SHWGWuFnaicz89e2b5a5e367116195a1ccb6fd388b5e.png',
						n_url: 'http://oss.antaimedical.com/images/static/2024/06/666d2d9beb14d0f049f44d11pfoT28ge2U5j83b6bac5c70285018853a23e4f457d1d.png',
						isNull: false
					},
					{
						type: 2,
						text: '午餐',
						url: 'http://oss.antaimedical.com/images/static/2024/06/666d2da8eb14d0f049f44d12QtVILwrXeGxT7601bbc78ffc1c125f94fbfd12e2059a.png',
						n_url: 'http://oss.antaimedical.com/images/static/2024/06/666d2db9eb14d0f049f44d13a4TMncFa70zz6abab4a9a135072f6efd839191d856d9.png',
						isNull: false
					},
					{
						type: 3,
						text: '晚餐',
						url: 'http://oss.antaimedical.com/images/static/2024/06/666d2dc7eb14d0f049f44d141LkjGm39exK8375348fde4233be42db7f160fc5e5a41.png',
						n_url: 'http://oss.antaimedical.com/images/static/2024/06/666d55d2eb14d0f049f44d1cHV85sexvsId1121fc1bad39599b80682e79792bd3e8b.png',
						isNull: false
					},
					{
						type: 7,
						text: '加餐',
						url: 'http://oss.antaimedical.com/images/static/2024/06/666d2dd2eb14d0f049f44d15rSlqyPcuVOoy1a6e8ea37f41b6d786a20591cdd8e6e9.png',
						n_url: 'http://oss.antaimedical.com/images/static/2024/06/666d2ddfeb14d0f049f44d16AnQ1hFOKvPy06fb46fbe79e0caf2ad54083e20ec2401.png',
						isNull: false
					},
				],
				status: [
					'http://oss.antaimedical.com/images/static/2024/06/666d344deb14d0f049f44d19nLCYRs6gqIu4d1573ef1c4be017d029a0d1cb62ac5da.png',
					'http://oss.antaimedical.com/images/static/2024/06/666d345eeb14d0f049f44d1aI9xNeH4ts7a783b3687c40253ad9f251a61424486bd1.png',
					'http://oss.antaimedical.com/images/static/2024/06/666d346beb14d0f049f44d1bdZgMKnmb0iTS27b54b8d865ea7c86aae9f3165321820.png'
				],
				taskStatus: [{
					text: '当天',
					color: '#545DDE'
				}, {
					text: '已达成',
					color: '#7CD37E'
				}, {
					text: '未达成',
					color: '#CCCCCC'
				}],
				weeks: [{
					type: -1,
					text: '一',
					color: ''
				}, {
					type: -1,
					text: '二',
					color: ''
				}, {
					type: -1,
					text: '三',
					color: ''
				}, {
					type: -1,
					text: '四',
					color: ''
				}, {
					type: -1,
					text: '五',
					color: ''
				}, {
					type: -1,
					text: '六',
					color: ''
				}, {
					type: -1,
					text: '日',
					color: ''
				}],
				tabs: [{
						type: 1,
						text: '近7天'
					},
					{
						type: 2,
						text: '近30天'
					},
					{
						type: 3,
						text: '近90天'
					},
				],
				ecGrade: {
					option: {
						animation: true,
						series: [{
							startAngle: 210,
							endAngle: -30,
							min: 0,
							max: 15,
							type: 'gauge',
							radius: '100%',
							pointer: {
								show: false
							},
							progress: {
								show: true,
								roundCap: true,
								clip: true,
								width: 10,
								itemStyle: {
									color: '#545dde'
								}
							},
							axisLine: {
								roundCap: true,
								lineStyle: {
									width: 10,
									color: [
										[1, '#edeefb']
									]
								}
							},
							axisTick: {
								show: false
							},
							splitLine: {
								show: false
							},
							axisLabel: {
								show: false
							},
							anchor: {
								show: false
							},
							data: [{
								value: 0
							}],
							detail: {
								show: false
							}
						}]
					},
					lazyLoad: false
				},
				currentWIndex: 1,
				currentType: 2,
				showModal: false, // 体重弹窗
				showInfo: false, // 体重点击详情
				showDelete: false, // 体重删除弹框
				detailTime: '',
				detailData: '',
				chartsRecordList: [], // 测量记录图表数据
				currentRecordIndex: 0,
				showClickDetails: false,
				recordInfo: undefined,
				currentContrastIndex: 1, // 饮食轮播卡片展示下标
				contrastList: [], // 饮食对比卡片数据
				totalContrast: 0, // 已比对饮食条数
				currentContrastIndex: 0,
				sleepInfo: {}, // 睡眠趋势详情
				currentCampaignIndex: 0, // 运动记录轮播卡片展示下标
				campaignList: [], // 运动记录对比卡片数据
				scoreInfo: {}, // 代谢弹性分数详情数据
				goalStatus: []
			}
		},
		filters: {
			typeFilte(data) {
				if (data == 1) {
					return '早餐'
				} else if (data == 2) {
					return '中餐'
				} else if (data == 3) {
					return '晚餐'
				} else if (data == 4) {
					return '加餐'
				}
			},
			comparisonFilte(info) {
				if (typeof info.rerLevelAfter !== 'number' || typeof info.rerLevelFront !== 'number') return '未形成对比'
				if (info.rerLevelAfter > info.rerLevelFront) {
					return '上升'
				} else if (info.rerLevelAfter === info.rerLevelFront) {
					return '持平'
				} else if (info.rerLevelAfter < info.rerLevelFront) {
					return '下降'
				}
			}
		},
		computed: {
			...mapState({
				ble: state => state.ble, // 实时蓝牙全局状态
			}),
            ...mapGetters ({
                userInfo: 'getUserInfo'
            }),
		},
        watch: {
			'userInfo.userId': {
				handler(newVal, oldVal) {
                    this.userId = newVal
					this.fetchData()
				}
			},
		},
		onPullDownRefresh() {
			this.fetchData()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1200)
		},
		onReady() {
			// this.drawProgress() // 绘制代谢弹性分数
		},
		onLoad() {
            if (this.userId) {
                this.fetchData()
            }
			uni.$on('refreshData', () => {
				this.fetchData()
			})
		},
		methods: {
            isLogin(){
                if (!this.userInfo.userId) {
                    uni.showModal({
						title: '提示',
						content: '需要授权后才能使用。',
						confirmColor: '#545DDE',
						// showCancel: false,
						cancelText: '再看看',
						confirmText: '马上授权',
						success(res) {
                            if (res.confirm) {
		                    	console.log('用户点击确定');
                                uni.navigateTo({
							    	url: `/pagesB/login/index`
							    })
		                    } else if (res.cancel) {
		                    	console.log('用户点击取消');
		                    }
                            
						}
					})
                    return true
                }
                return false
            },
			async fetchData() {
				uni.showLoading({
					title: '加载中...'
				})
				try {
					await this.getInfoByUser()
					await this.fetchRecordData()
					await this.fetchContrast()
					await this.fetchSleepAndCampaign()
					await this.fetchWeightData(2)
				} catch (e) {
					//TODO handle the exception
				}
				uni.hideLoading()
			},
			// 获取首页数据
			async fetchRecordData() {
				this.showClickDetails = false
				let params = {
					page: 1,
					size: 30,
					userId: this.userId
				}
				try {
					const res = await findMeasureRecordByPage(params)
					if (res.code == 200) {
						this.chartsRecordList = res.data.list
						let arr = res.data.list.map(item => {
							return item.rerLevel
						})
						// 如果没有数据或者数据少于12条填充x轴数据
						let IndexArr = []
						if (!this.chartsRecordList.length || this.chartsRecordList.length < 12) {
							for (var i = 1; i <= 12; i++) {
								IndexArr.push(i)
							}
						} else {
							IndexArr = this.chartsRecordList.map((item, index) => {
								return index + 1
							})
						}
						this.loadRecordCharts(arr, IndexArr)
					}
				} catch (e) {
					//TODO handle the exception
				}
			},
			// 获取日常观察对比数据
			async fetchContrast() {
				uni.showLoading({
					title: '加载中...'
				})
				let params = {
					userId: this.userId
				}
				try {
					const res = await findMealDietaryContrast(params)
					const res_2 = await findMealDietaryTime(params)
					if (res.code == 200 && res_2.code == 200) {
						let arr = []
						res_2.data.forEach((item, index) => {
							if (res.data.length) {
								this.totalContrast = res.data[0].sucessSum
								// 查询是否存在同类型的数据
								let findIndex = res.data.findIndex(_item => {
									return item.type == _item.labelType
								})
								if (findIndex == -1) {
									arr.push({
										...item,
										rerLevelAfter: null,
										rerLevelFront: null,
									})
								} else {
									arr.push({
										...item,
										rerLevelAfter: res.data[findIndex].rerLevelAfter,
										rerLevelFront: res.data[findIndex].rerLevelFront,
									})
								}
							} else {
								arr.push({
									...item,
									rerLevelAfter: null,
									rerLevelFront: null,
								})
							}
						})
						this.contrastList = arr
						this.foodOptions.forEach(item => {
							this.contrastList.forEach(_item => {
								if (item.type == _item.type) {
									if (!_item.dietaryTime) {
										item.isNull = true
									} else {
										item.isNull = false
									}
								}
							})
						})
					}
				} catch (e) {
					//TODO handle the exception
				}
			},
			// 获取运动和睡眠趋势变化
			async fetchSleepAndCampaign() {
				uni.showLoading({
					title: '加载中...'
				})
				let params = {
					userId: this.userId
				}
				try {
					const res = await findSportComparison(params)
					const res_2 = await findSleepCompare(params)
					if (res.code == 200 && res_2.code == 200) {
						let after = res_2.data.find(item => {
							return item.tag == 1
						})
						let front = res_2.data.find(item => {
							return item.tag == 7
						})
						this.sleepInfo = {
							rerLevelAfter: after.rerLevel,
							rerLevelFront: front.rerLevel,
							duration: after.duration,
							afterId: after.id,
							frontId: front.id,
						}
						this.campaignList = res.data.map(item => {
							return {
								...item,
								rerLevelFront: item.beforeRerLevel,
								rerLevelAfter: item.afterRerLevel,
							}
						})
					}
				} catch (e) {
					//TODO handle the exception
				}
			},
			// 获取代谢分数数据
			async ferchMetabolicFlexScore() {
				let params = {
					userId: this.userId,
					bodyId: this.userInfo.id || this.userInfo.bodyId
				}
				try {
					const res = await findMetabolicFlexScore(params)
					if (res.code == 200) {
						this.scoreInfo = res.data
						this.ecGrade.option.series[0].data[0].value = res.data.mbScore ? res.data.mbScore : 0
						this.goalStatus = [{
								name: '清晨',
								status: this.scoreInfo.tagLableOne
							},
							{
								name: '早餐后',
								status: this.scoreInfo.tagLablTwo
							},
							{
								name: '午餐后',
								status: this.scoreInfo.tagLableThree
							},
							{
								name: '晚餐后',
								status: this.scoreInfo.tagLableFore
							}
						]
						this.weeks[0].type = res.data.week1
						this.weeks[1].type = res.data.week2
						this.weeks[2].type = res.data.week3
						this.weeks[3].type = res.data.week4
						this.weeks[4].type = res.data.week5
						this.weeks[5].type = res.data.week6
						this.weeks[6].type = res.data.week7
						this.weeks.forEach(item => {
							item.color = this.getWeekColor(item.type)
						})
						if (this.scoreInfo.popFlag == 0) {
							uni.navigateTo({
								url: `/pagesA/health/grade/update?info=${JSON.stringify(this.scoreInfo)}`
							})
						}
					}
				} catch (e) {
					//TODO handle the exception
				}
			},
			// 获取用户详情信息
			async getInfoByUser() {
                if (this.userId) {
                    
                }
				let params = {
					userId: this.userId,
					urlencoded: true
				}
				try {
					const res = await getDetailsByUser(params)
					if (res.code == 200) {
						this.$store.commit('setUserInfo', res.data)
						await this.ferchMetabolicFlexScore()
					}
				} catch (e) {
					//TODO handle the exception
				}
			},
			// 加载测量记录图表
			loadRecordCharts(data, indexArr) {
				this.$refs['record-charts'].init((canvas, width, height, dpr) => {
					const chart = echarts.init(canvas, null, {
						width,
						height,
						devicePixelRatio: dpr // new
					});
					chart.setOption(
						this.getOption(data, indexArr)
					);
					chart.on('click', 'series', (params) => {
						console.log('cartsclick', params)
						this.currentRecordIndex = params.dataIndex
						this.recordInfo = {
							level: this.chartsRecordList[this.currentRecordIndex].rerLevel,
							type: '',
							measureTime: this.chartsRecordList[this.currentRecordIndex].measureTime
						}

						if (this.chartsRecordList[this.currentRecordIndex].tag == 4 || this
							.chartsRecordList[this.currentRecordIndex].tag ==
							5) {
							this.recordInfo.type = this.getOtherTagLabel(this.chartsRecordList[this
									.currentRecordIndex]
								.label)
						} else {
							this.recordInfo.type = this.getTagLabel(this.chartsRecordList[this
								.currentRecordIndex].tag)
						}
						this.showClickDetails = true
					});
					return chart;
				});
			},
			// 操作饮食卡片上一页
			reduce_c() {
				if (this.currentContrastIndex == 0) return
				this.currentContrastIndex--
			},
			// 操作饮食卡片下一页
			next_c() {
				if (this.currentContrastIndex == this.contrastList.length - 1) return
				this.currentContrastIndex++
			},
			// 操作运动卡片上一页
			reduce_cp() {
				if (this.currentCampaignIndex == 0) return
				this.currentCampaignIndex--
			},
			// 操作运动卡片下一页
			next_cp() {
				if (this.currentCampaignIndex == this.campaignList.length - 1) return
				this.currentCampaignIndex++
			},
			// 删除体重记录
			async deleteRecord() {
				let time = this.detailTime.replace(/年|月/g, '-').replace(/日/g, '')
				try {
					let params = {
						time,
						userId: this.userId
					}
					const res = await delWeightLog(params)
					if (res.code == 200) {
						this.showInfo = false
						this.showDelete = false
						this.fetchWeightData(this.currentType)
						uni.showToast({
							title: '删除成功'
						})
					}
				} catch (e) {
					//TODO handle the exception
				}
			},
			// 添加体重记录
			async setWeight(val) {
				try {
					let params = {
						userId: this.userId,
						weight: val
					}
					const res = await addWeightLog(params)
					if (res.code == 200) {
						this.showModal = false
						this.showInfo = false
						this.fetchWeightData(this.currentType)
						uni.showToast({
							title: '添加成功'
						})
					}
				} catch (e) {
					//TODO handle the exception
				}
			},
			//  获体重记录数据
			async fetchWeightData(type) {
				this.showInfo = false
				let params = {
					userId: this.userId,
					type,
					time: `${dayjs().format('YYYY-MM-DD')} 23:59:59`
				}
				const res = await getWeightRecord(params)
				if (res.code == 200) {
					let list = res.data.map(item => {
						if (item.weight) {
							return item.weight
						} else {
							return 1
						}
					})
					let min = Math.min(...list)
					let max = Math.max(...list)
					let intMin = min % 10 == 0 ? min + 5 : min + 10 - (min % 10) + 5
					let intMax = max % 10 == 0 ? max + 5 : max + 10 - (max % 10) + 5
					let interval = intMax - intMin
					let data = res.data.map(item => {
						return {
							value: [item.time, item.weight],
							symbol: 'emptyCircle',
							itemStyle: {
								color: '#545DDE'
							}
						}
					})
					this.$refs['mychart-w-line'].init((canvas, width, height, dpr) => {
						const chart = echarts.init(canvas, null, {
							width,
							height: height,
							devicePixelRatio: dpr // new
						});
						chart.setOption(
							this.getWeightOption(intMin, intMax, interval, data, this.currentType == 3 ?
								'more' : 'normal')
						);
						chart.on('click', 'series', (params) => {
							console.log('cartsclick', params)
							// this.detailTime = uni.$u.timeFormat(new Date(params.data.value[0])
							// 	.getTime(), 'yyyy年mm月dd日')
							this.detailTime = dayjs(params.data.value[0]).format('YYYY年MM月DD日')
							this.detailData = params.data.value[1]
							this.showInfo = true
						});
						return chart;
					});
				}
			},
			changeWeightTab(index, type) {
				this.currentWIndex = index
				this.currentType = type
				this.fetchWeightData(type)
			},
			navigate(url) {
                if (this.isLogin()) return
				uni.navigateTo({
					url
				})
			},
			navigateTo(url) {
				uni.navigateTo({
					url
				})
			},
			// 饮食快捷测量跳转
			shortcutDiet(tag, type) {
				if (tag == 4) { // 餐前
					uni.navigateTo({
						url: `/pagesA/health/device/connect/index?tag=${tag}&meal=${type}`
					})
				} else {
					uni.navigateTo({
						url: `/pagesA/health/device/info/diet/before?tag=${tag}&meal=${type}`
					})
				}
			},
			// 运动快捷测量跳转
			shortcutCampaign(tag) {
				uni.navigateTo({
					url: `/pagesA/health/device/info/campaign/index?tag=${tag}`
				})
			},
			// 添加用餐记录快捷入口
			goAddRecord(info, title) {
				let day = dayjs().format('YYYY-MM-DD')
				if (info.isNull) {
					uni.navigateTo({
						url: `/pagesA/health/device/info/diet/time?meal=${info.type}&day=${day}`
					})
				} else {
					let foodType = this.contrastList.find(item => {
						return item.type == info.type
					})
					let params = {
						dietaryTime: `${day} ${foodType.dietaryTime}:00`,
						mealId: foodType.id,
						type: info.type,
						title
					}
					uni.navigateTo({
						url: `/pagesA/health/diet/type/index?params=${JSON.stringify(params)}&time=${day}`
					})
				}
			},
			goAnalyse() {
                if (this.isLogin()) return
				uni.navigateTo({
					url: '/pagesA/health/analyse/index'
				})
			},
			getOption(data, indexArr) {
				return {
					grid: {
						left: 0,
						right: 0,
						bottom: 0,
						top: "5%",
						containLabel: true
					},
					dataZoom: {
						id: 'ecRecord',
						type: 'inside',
						filterMode: 'none',
						xAxisIndex: 0,
						startValue: 0,
						endValue: 11,
						zoomLock: true
					},
					xAxis: {
						type: 'category',
						axisLine: {
							show: false
						},
						axisLabel: {
							margin: 16,
							color: '#666D7F',
							fontWeight: 'normal',
							fontSize: 10,
							align: 'center'
						},
						axisTick: {
							show: false
						},
						data: indexArr
					},
					yAxis: {
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
								width: 1,
								color: '#E6EBF5',
								type: 'dashed'
							}
						},
						min: 0,
						max: 5,
						interval: 1,
						axisLabel: {
							margin: 4,
							showMinLabel: false,
							color: (value, index) => {
								if (value == 1) {
									return '#7CD37E'
								} else if (value == 2) {
									return '#78B2DD'
								} else if (value == 3) {
									return '#9C70DE'
								} else if (value == 4) {
									return '#FFA168'
								} else if (value == 5) {
									return '#F1C56B'
								}
							}
						},
						verticalAlign: 'middle'
					},
					series: [{
						name: '历史记录',
						type: 'bar',
						barWidth: 8,
						itemStyle: {
							opacity: 0.8,
							borderRadius: [4, 4, 0, 0],
							color: (params) => {
								return getItemColor(params.value)
							}
						},
						data: data
					}, ]
				}

			},
			getWeightOption(intMin, intMax, interval, data, type) {
				return {
					grid: {
						left: 0,
						right: '1%',
						bottom: '18%',
						top: '15%',
					},
					dataZoom: type == 'more' ? {
						id: 'ecWeight',
						type: 'inside',
						filterMode: 'none',
						orient: 'horizontal',
						start: 69,
						end: 100,
						maxValueSpan: 3600 * 24 * 1000 * 30,
						zoomLock: true
					} : null,
					xAxis: {
						type: 'time',
						boundaryGap: type == 'more' ? ['3%', '3%'] : ['10%', '10%'],
						splitNumber: 7,
						interval: 3600 * 24 * 1000,
						minInterval: 3600 * 24 * 1000,
						maxInterval: 3600 * 24 * 1000,
						axisLine: {
							lineStyle: {
								type: 'dashed',
								color: '#E6EBF5'
							}
						},
						axisLabel: {
							formatter: (value, index) => {
								let min = new Date(data[0].value[0].replace(/-/g, '/'))
									.getTime()
								let lastLength = data[data.length - 1].value[0]
									.replace(/-/g, '/')
								let max = new Date(lastLength).getTime()
								if (value == min) {
									let date = new Date(min)
									return `${date.getMonth()+1}.${date.getDate()}`
								} else if (value == max) {
									let date = new Date(max)
									return `${date.getMonth()+1}.${date.getDate()}`
								} else {
									return ''
								}
							},
							margin: 16,
							color: '#666D7F',
							align: 'center'
						},
						axisTick: {
							show: false
						},
					},
					yAxis: {
						type: 'value',
						position: 'right',
						min: intMin,
						max: intMax,
						interval,
						axisTick: {
							show: false,
						},
						axisLine: {
							show: false
						},
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dashed',
								color: '#ecf0f7',
							}
						},
						axisLabel: {
							inside: true,
							verticalAlign: 'bottom',
							align: 'center',
							padding: [0, 0, 10, 0]
						},
					},
					select: {
						itemStyle: {
							color: '#FF5B37',
							borderWidth: 0
						}
					},
					series: [{
						name: '体重',
						type: 'line',
						smooth: true,
						selectedMode: 'single',
						symbolSize: 6,
						connectNulls: true,
						lineStyle: {
							width: 1,
							color: '#545DDE'
						},
						areaStyle: {
							origin: 'auto',
							opacity: 1,
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: 'rgba(84,93,222,0.1)'
								},
								{
									offset: 0.85,
									color: 'rgba(84,93,222,0)'
								}
							])
						},
						data
					}]
				}
			},
			bindContrastChange(e) {
				this.currentContrastIndex = e.detail.current
			},
			bindCampaignChange(e) {
				this.currentCampaignIndex = e.detail.current
			},
			getTagLabel(type) {
				if (type == 1) {
					return '清晨测量'
				} else if (type == 2) {
					return '运动前'
				} else if (type == 3) {
					return '运动后'
				} else if (type == 6) {
					return '禁食后'
				} else if (type == 7) {
					return '睡前'
				} else if (type == 8) {
					return '自定义测量'
				} else if (type == 9) {
					return '第0天测量'
				} else if (type == 10) {
					return '呼气采集'
				} else if (type == 11) {
					return '吸气采集 '
				}
			},
			getOtherTagLabel(type) {
				if (type == 1) {
					return '早餐前'
				} else if (type == 2) {
					return '午餐前'
				} else if (type == 3) {
					return '晚餐前'
				} else if (type == 4) {
					return '早餐后'
				} else if (type == 5) {
					return '午餐后'
				} else if (type == 6) {
					return '晚餐后'
				} else if (type == 7) {
					return '零食前'
				} else if (type == 8) {
					return '零食后'
				}
			},
			getCurrentBol(index) {
				if (this.currentCampaignIndex == 0 && index == 0) {
					return true
				} else if (this.currentCampaignIndex >= 4 && index == 4) {
					return true
				} else if (this.currentCampaignIndex == index) {
					return true
				} else {
					return false
				}
			},
			getBgColor(data) {
				return getItemColor(data)
			},
			getWeekColor(type) {
				if (type === 0) {
					return '#FA5151'
				} else if (type === 1) {
					return '#7CD37E'
				} else if (type === 2) {
					return '#545DDE'
				} else {
					return ''
				}
			},
			getHeight(data) {
				if (data == 5) {
					return '86rpx'
				} else if (data == 4) {
					return '74rpx'
				} else if (data == 3) {
					return '62rpx'
				} else if (data == 2) {
					return '50rpx'
				} else if (data == 1) {
					return '38rpx'
				} else {
					return '0'
				}
			},
			getStatusSrc(info) {
				if (info.rerLevelAfter > info.rerLevelFront) {
					return this.status[2]
				} else if (info.rerLevelAfter === info.rerLevelFront) {
					return this.status[1]
				} else if (info.rerLevelAfter < info.rerLevelFront) {
					return this.status[0]
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.t_container {
		width: 100%;
		height: 556rpx;
		background-image: url('http://oss.antaimedical.com/images/static/2024/08/66ac9a14e4b000d2c606b51bKtP0NbqctY5U39a744c1b547badc117d392dbc405dfb.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		padding: 152rpx 0 0 48rpx;

		.l_content {
			font-weight: 500;
			font-size: 48rpx;
			color: #FFFFFF;
			font-family: PingFangSC-Medium, PingFang SC;
			text-align: left;
		}
	}

	.m_container {
		width: 100%;
		background-color: #FAFBFF;
		border-radius: 48rpx 48rpx 0 0;
		margin-top: -210rpx;
		padding: 64rpx 0;

		.plate_t {
			margin: 0 48rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 32rpx;

			.t-l {
				font-weight: 500;
				color: #333333;
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
			}

			.t-r {
				display: flex;
				align-items: center;
				color: #545DDE;

				.more {
					font-size: 24rpx;
				}

				.icon-arrow_rigth {
					font-size: 26rpx;
				}
			}

		}

		.my-swiper {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			position: relative;
			overflow: hidden;
		}

		.swiper-container {
			max-height: 400rpx;
			height: 376rpx;
			flex: 1;

			.swiper-item {
				flex: 1;
				display: flex;
				box-sizing: border-box !important;
			}
		}

		.record-card {
			margin: 0 48rpx 16rpx;
			padding: 48rpx 48rpx 16rpx 32rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(84, 93, 222, 0.1);
			border-radius: 32rpx;
			color: #666666;

			.c_tips {
				display: flex;
				align-items: center;

				.txt {
					font-size: 32rpx;
					padding-right: 16rpx;
				}

				.icon-question-circle-fill {
					font-size: 34rpx;
				}
			}

			.total {
				padding: 16rpx 0 40rpx;
				font-size: 24rpx;
				text-align: left;
			}

			.r_charts {
				width: 100%;
				height: 322rpx;
				padding-bottom: 22rpx;
			}

			.details {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 32rpx 16rpx 16rpx 0;
				border-top: 2rpx solid #FAFAFA;
				font-size: 28rpx;
				color: #666;

				.d_l {
					display: flex;
					align-items: center;

					.l_l {
						width: 44rpx;
						height: 44rpx;
						border-radius: 16rpx;
						line-height: 44rpx;
						color: #fff;
					}

					.type {
						padding-left: 16rpx;
					}
				}
			}

			.goRecord {
				width: 100%;
				height: 88rpx;
			}
		}

		.m-card {
			margin: 0 48rpx 48rpx;
			padding: 48rpx 32rpx;
			background-color: #FFFFFF;
			border-radius: 32rpx;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(105, 130, 232, 0.1);
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #333333;

			.task,
			.unlock,
			.none {
				font-size: 28rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.status {
					margin: 48rpx 0 72rpx;
					font-weight: 500;
					font-size: 48rpx;
					font-family: PingFangSC-Medium, PingFang SC;
				}

				.m_t {
					margin-bottom: 12rpx;
					font-weight: 500;
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					text-align: left;
				}

				.intro {
					padding: 0 64rpx 64rpx;
					font-size: 28rpx;
					line-height: 40rpx;
					text-align: left;
				}

				.weeks,
				.day {
					width: 100%;
					padding: 32rpx;
					margin-bottom: 64rpx;
					border-radius: 32rpx;
					background-color: #FAFAFA;
					color: #333333;

					.d_t {
						font-size: 28rpx;
						font-weight: 500;
						font-family: PingFangSC-Medium, PingFang SC;
						text-align: left;
					}

					.tips {
						line-height: 34rpx;
						padding: 16rpx 0 48rpx;
						font-size: 24rpx;
						text-align: left;
					}

					.options {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.option {
							display: flex;
							flex-direction: column;
							align-items: center;

							.o_status {
								width: 96rpx;
								height: 96rpx;
								margin-bottom: 16rpx;
								border-radius: 50%;
								font-size: 32rpx;
								background-color: #FAFAFA;
								border: 2rpx solid #545DDE;
								color: #545DDE;
								display: flex;
								align-items: center;
								justify-content: center;
							}

							.checked {
								background: linear-gradient(180deg, #839BFC 0%, #545DDE 100%);
								border: 0;
								color: #fff;
							}

							.type {
								font-size: 20rpx;
							}
						}
					}
				}
			}

			.unlock {
				.m_t {
					margin: 48rpx 0 64rpx 0;
					padding: 0 32rpx;
				}
			}

			.task {
				.u_time {
					width: 100%;
					text-align: left;
				}

				.garage {
					width: 244rpx;
					height: 244rpx;
					margin-top: 64rpx;
					position: relative;

					.uni-ec-canvas {
						width: 100%;
						height: 100%;
					}

					.details {
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -60%);
						display: flex;
						flex-direction: column;
						align-items: center;
						font-weight: 500;
						font-size: 46rpx;
						font-family: PingFangSC-Medium, PingFang SC;
					}
				}

				.m_t {
					padding: 0 32rpx;
					margin-bottom: 0;
				}

				.weeks {
					padding: 32rpx 32rpx 48rpx 32rpx;
					margin: 64rpx 0 0 0;

					.w_box,
					.status {
						display: flex;
						align-items: center;
						margin: 16rpx 0 48rpx 0;

						.s_i {
							display: flex;
							align-items: center;
							margin-right: 48rpx;

							.s_dot {
								width: 24rpx;
								height: 24rpx;
								border-radius: 50%;
							}

							.s_text {
								font-size: 24rpx;
								padding-left: 8rpx;
							}
						}
					}

					.w_box {
						margin: 0;
						padding: 0 6rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.week {
							display: flex;
							flex-direction: column;
							align-items: center;

							.w_dot {
								width: 36rpx;
								height: 36rpx;
								border-radius: 50%;
							}

							.w_text {
								font-size: 20rpx;
								padding-top: 16rpx;
							}
						}
					}
				}
			}

			.more_button {
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				background: #545DDE;
				border-radius: 16rpx;
				color: #fff;
				font-size: 36rpx;
			}

			.garage {
				width: 320rpx;
				height: 320rpx;
				position: relative;

				.canvas {
					width: 100%;
					height: 100%;
				}

				.status-t {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);

					.status-count {
						font-weight: 500;
						font-size: 36rpx;
						color: #333333;
						font-family: PingFangSC-Medium, PingFang SC;
					}
				}
			}

		}

		.w-card {
			margin: 0 48rpx 48rpx;
			padding: 48rpx;
			background-color: #FFFFFF;
			border-radius: 32rpx;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(105, 130, 232, 0.1);
			color: #666666;

			.title {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.t-l {
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				.handle {
					width: 118rpx;
					height: 44rpx;
				}
			}

			.tabs {
				width: 100%;
				margin-top: 78rpx;
				display: flex;
				align-items: center;

				.tab {
					width: 33.3%;
					font-size: 24rpx;
					color: #666D7F;
					padding-bottom: 24rpx;
					border-bottom: 2rpx solid #FAFAFA;
				}

				.current {
					border-bottom: 4rpx solid #545DDE;
					border-radius: 3rpx;
				}
			}


			.charts_w {
				height: 300rpx;
				margin-top: 64rpx;
				width: 100%;
				position: relative;

				.uni-ec-canvas {
					position: absolute;
					left: 0;
					top: 0;
					z-index: 88;
					width: 100%;
					height: 100%;
				}

				.maxSingle,
				.minSingle {
					position: absolute;
					right: -32rpx;
					font-size: 8px;
					color: #666666;
				}

				.maxSingle {
					top: 4rpx;
				}

				.minSingle {
					bottom: 78rpx;
				}
			}

			.showModal-page {
				width: 100%;
				height: 64rpx;
				padding: 0 32rpx;
				background-color: #FAFAFA;
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.s_l {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					flex: 1;
					font-size: 20rpx;
					color: #666666;

					.showModal-line {
						width: 2rpx;
						height: 36rpx;
						background: #E5E5E5;
						margin: 0 24rpx;
					}

					.info_data {
						display: flex;
						align-items: center;
					}
				}

				.h_b {
					width: 80rpx;
					height: 36rpx;
					line-height: 32rpx;
					border: 2rpx solid #545DDE;
					border-radius: 22rpx;
					color: #545DDE;
					font-size: 18rpx;
				}
			}
		}

		.card_btn {
			width: 100%;
			height: 88rpx;
			line-height: 80rpx;
			border: 4rpx solid #545dde;
			color: #545dde;
			border-radius: 16rpx;
			font-size: 36rpx;
		}

	}
</style>